:root {
    --text: hsl(9, 62%, 96%);
    --background: hsl(4, 68%, 5%);
    --primary: hsl(2, 65%, 72%);
    --secondary: hsl(3, 66%, 14%);
    --accent: hsl(2, 65%, 54%);
  }

  
body{
    background-color: var(--background);
    color: var(--text);
    padding: 2rem;
    font-family: 'Times New Roman', Times, serif;
}
  h1{
    font-size: 3rem;
}

/* The container */
.container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  /* Hide the browser's default checkbox */
  .container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
  
  /* Create a custom checkbox */
  .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: var(--text);
  }
  
  /* On mouse-over, add a grey background color */
  .container:hover input ~ .checkmark {
    background-color: var(--text);
  }
  
  /* When the checkbox is checked, add a blue background */
  .container input:checked ~ .checkmark {
    background-color: var(--primary);
  }
  
  /* Create the checkmark/indicator (hidden when not checked) */
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }
  
  /* Show the checkmark when checked */
  .container input:checked ~ .checkmark:after {
    display: block;
  }
  
  /* Style the checkmark/indicator */
  .container .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid var(--accent);
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }

    
button{
  background-color: var(--primary);
  color: var(--secondary);
  padding: .25rem;
  border-radius: 10px ;
  border: .1rem solid;
  border-color: var(--text);
  font-weight: 400;
}